<template>
	<view>
		<view class="bg">
			<view class="fanhui">
					<image src="../../../../static/teacherimg/fan.png" mode="" class="hui" @click="fanhui"></image>
					<text class="myxueyuanzi">布置作业</text>
			</view>
		</view>
		
		<view class="biaoti">
		      <view class="zuoyebiaoti">作业标题</view>
		
		      <view class="zuoye-riqi">
		        <input type="text" placeholder="标题" v-model="title" />
		      </view>
		</view>
		<!-- 发送学生 -->
		<view class="fasong">
		      <view class="zuoye">发送学生：</view>
		      <view class="xueyuan">
		      </view>
		      <image class="zhuan" src="../../../../static/teacherimg/fasong.png" alt="" />
		</view>
		<!-- 截止时间 -->
		<view class="endtime" type="primary" @click="onShowDatePicker('datetime')">
		    <view class="jiezhi">截止时间：</view>
		    <view class="xuantian">
				{{datetime}}
			</view>
		    <image class="zhuan2" src="../../../../static/teacherimg/fasong.png" alt="" />
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
		<view class="jiezhitime">
			(若设置截止时间，截止前一天21:00，系统将自动提醒未提交作业)
		</view>
		<!-- 作业内容 -->
		<view class="zuoye-yaoqiu">作业要求：</view>
		
		
		<div class="zuoye-content">
		      <textarea
		        name="zuoye"
		        id="yaoqiu"
		        placeholder="练习毛笔字"
		        v-model="zuoyaoqiu"
		      >
		      </textarea>
		      <div class="ziti">
		        <img src="../../../../static/teacherimg/ziti.png" alt="" />
		      </div>
			  <div class="shipin">
			    <img src="../../../../static/teacherimg/shipin.png" alt="" />
			  </div>
		      <div class="xiangji">
		        <img src="../../../../static/teacherimg/xiangji.png" alt="" />
		      </div>
		    </div>
		
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				title:'',
				studentList:[],
				zuoyaoqiu:'注意细节',
				datetime: '2019/01/01 15:00:12',
				showPicker: false,
				type: 'rangetime',
				value: ''
			}
		},
		methods: {
			onShowDatePicker(type){//显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			onSelected(e) {//选择
				this.showPicker = false;
				if(e) {
					this[this.type] = e.value; 
					//选择的值
					console.log('value => '+ e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			}
		}
	}
</script>

<style>

.bg{
		width: 100%;
		height: 116rpx;
		position: relative;
		background: url(../../../../static/teacherimg/tabbar.png) no-repeat;
		background-size: cover;
	}
	.fanhui{
		width: 690rpx;
		height: 35rpx;
		position: absolute;
		display: flex;
		bottom: 0rpx;
		left: 30rpx;
	}
	.myxueyuanzi{
		width:auto;
		height: 100%;
		font-size:32rpx;
		color: #333333;
		font-weight: bold;
		margin: auto;
	}
	.hui{
		width: 18rpx;
		height: 32rpx;
	}
	
	.biaoti {
	  width: 600rpx;
	  height: 13.3333vw;
	  border-bottom: 0.1333vw solid #f5f5f5;
	  margin: auto;
	  margin-top:11.4vw;
	  display:flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.zuoye,
	.jiezhi {
	  width:25vw;
	  height: 4.2667vw;
	  color: #333333;
	  font-size: 28rpx;
	  font-weight: bold;
	  font-family: PingFang;
	  line-height: 4.2667vw;
	  margin-top: 4.5333vw;
	  font-size: 28rpx;
	}
	.jiezhi{
	  float: left;
	}
	.zuoyebiaoti{
		font-size:28rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.fasong,
	.endtime {
	  width: 80vw;
	  height: 13.3333vw;
	  margin: auto;
	  border-bottom: 0.1333vw solid #f5f5f5;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	}
	.xueyuan,
	.xuantian {
	  width: auto;
	  height: 4.2667vw;
	  float: left;
	  margin: 4.5333vw 0vw 0vw 10.6667vw;
	  line-height: 4.2667vw;
	  font-size: 3.7333vw;
	  color: #333333;
	}
	
	.zhuan,
	.zhuan2 {
	  width: 1.4667vw;
	  height: 2.6667vw;
	  float: right;
	  margin: 5.3333vw 2.6667vw 0vw 0vw;
	}
	
	.jiezhitime{
		width:600rpx;
		height: 63rpx;
		color: #777777;
		font-size: 24rpx;
		margin: auto;
		margin-top:20rpx;
	}
	.zuoye-yaoqiu {
	  width: 600rpx;
	  height: 4.2667vw;
	  margin: auto;
	  color: #333333;
	  font-size: 28rpx;
	  font-weight: bold;
	  line-height: 4.2667vw;
	  margin-top: 60rpx;
	}
	
	.zuoye-content {
	  width: 84vw;
	  height: 65.3333vw;
	  margin: auto;
	  margin-top: 4vw;
	  background: #f5f5f5;
	  border-radius: 2.6667vw;
	  position: relative;
	}
	
	#yaoqiu {
	  width: 80vw;
	  height: auto;
	  margin: auto;
	  margin-top: 5.2vw;
	  margin-left: 2vw;
	  color: #777777;
	  font-size: 3.7333vw;
	  font-weight: bold;
	  border: none;
	  background: #f5f5f5;
	}
	
	.ziti {
	  width: 5.0667vw;
	  height: 5.6vw;
	  position: absolute;
	  bottom: 5.3333vw;
	  left: 5.3333vw;
	}
	.ziti img {
	  width: 5.0667vw;
	  height: 5.6vw;
	}
	.shipin {
	  width: 55rpx;
	  height: 50rpx;
	  position: absolute;
	  bottom: 5.3333vw;
	  left: 15.3333vw;
	}
	.shipin img {
	  width: 55rpx;
	  height: 50rpx;
	}
	
	.xiangji {
	  width: 6.5333vw;
	  height: 5.4667vw;
	  position: absolute;
	  bottom: 5.3333vw;
	  left: 28vw;
	}
	.xiangji > input {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  opacity: 0;
	}
	.xiangji img {
	  width: 6.5333vw;
	  height: 5.4667vw;
	}
</style>
